import React, { Component } from 'react'
import ReactDom from "react-dom";

export default class App extends Component {
    state={
        kaishiGame:true,
        girlList:[
            {
                id:1,
                age:20,
                height:168,
                name:'张晓妍',
                shi:0,
                fen:0,
                miao:10,
                isdao:false,
                isdong:false,

            },
            {
                id:2,
                age:20,
                shi:0,
                fen:0,
                miao:10,
                height:168,
                name:'李妍',
                isdao:false,
                isdong:false,
            }
        ]
    }
    input=React.createRef()
    input2=React.createRef()
    input1=React.createRef()

  render() {
    return (
      <div>
        <marquee style={{display:'flex',alignItem:'center',backgroundColor:'red',width:500,height:50,fontSize:28}} behavior="alternate">欢迎来到书宁选妃游戏</marquee>

        <button onClick={()=>{this.actionGame()}}>{this.state.kaishiGame?'开始选妃!!!':'爷玩够了'}</button>
        {
           !this.state.kaishiGame?<div>
            <input type="text" ref={this.input} placeholder='请输入张书宁看上的妹子' />
            <input type="text" ref={this.input1} placeholder='请输入妹子身高' />
            <input type="text" ref={this.input2} placeholder='请输入妹子年龄' />
            <button onClick={()=>{this.selectGirl()}}>确定选妃</button>
            <ul>
                {
                this.state.girlList.map((x,i)=>
                !x.isdao?<li key={x.id}>{x.name}<button onClick={()=>{this.selectToday(x,i)}}>选择今晚侍寝</button>
                {!x.isdao?<button onClick={()=>{this.daojishi(x,i)}}>打入冷宫!!</button>
                :<span><span style={{backgroundColor:'red'}}>{x.miao}年</span></span>}
                <button onClick={()=>{this.die(x,i)}}>赐死!!!</button></li>:null)
                }
            </ul>
            <div style={{fontSize:20,color:'white',width:500,backgroundColor:'black'}}>
            <div style={{fontSize:25,color:'white',width:500,backgroundColor:'black'}}>冷宫</div>
            <ul>
                {this.state.girlList.map((x)=>
                    x.isdao?<li key={x.id}><span style={{color:'red'}}>{x.name}</span>被打入冷宫,距离出宫还有<span style={{color:'red'}}>{x.miao}</span>年</li>:null
                )}
            </ul>
            </div>
            <div style={{fontSize:20,color:'black',width:500,backgroundColor:'pink'}}>
            <div style={{fontSize:25,color:'black',width:500,backgroundColor:'pink'}}>洞房</div>
            <ul>
                {this.state.girlList.map((x)=>
                    x.isdong?<li key={x.id}>书宁哥哥<br></br>今晚侍寝您的是,年龄为{x.age}岁的身高{x.height}的{x.name}</li>:null
                )}
            </ul>
            </div>
        </div>:null}
        
        {/* <alert>hahah</alert> */}
      </div>
    )
  }
  actionGame=()=>{
    // console.log('开始选妃!!!');
    this.setState({
        kaishiGame:!this.state.kaishiGame
    })
  }
  selectGirl=()=>{
    let list=[...this.state.girlList]
    list.push({
        id:this.state.girlList.length+1,
        height:this.input1.current.value,
        age:this.input2.current.value,
        shi:0,
        fen:0,
        miao:10,
        isdao:false,
        isdong:false,
        name:this.input.current.value

    })
    this.setState({
        girlList:list
    })
    // console.log(this.input);
    this.input.current.value=''
    this.input1.current.value=''
    this.input2.current.value=''

    alert('选妃成功!!!')
  }
  selectToday=(x,i)=>{
    let list=this.state.girlList
    list[i].isdong=true
    this.setState({
        girlList:list
    })
    alert('书宁哥哥,今晚侍寝您的是,年龄为'+x.age+'岁的身高'+x.height+'的'+x.name+'么么哒')
  }
  daojishi=(x,i)=>{
    // alert('')
    let list=[...this.state.girlList]
    list[i].isdao=true
    list[i].miao=10
   let h = setInterval(()=>{
    let list=[...this.state.girlList]

    if(list[i].miao<2){
        clearInterval(h)
        list[i].isdao=false
    }
    list[i].miao-=1
     this.setState({
        girlList:list
    })
    },1000)
    
    this.setState({
        girlList:list
    })
    console.log(this.state.girlList);
  }
  die=(x,i)=>{
    alert('该死的东西,竟敢惹怒我家书宁哥哥,来人啊,把'+x.name+'拉出去斩了!')
    let list=[...this.state.girlList]
    // list[i]
    list.splice(i,1)
    this.setState({
        girlList:list
    })
  }
}

ReactDom.render(<App/>, document.getElementById('root'))
